<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id='app'>
    <h1>{{name}}</h1>
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button type="primary" @click="gomydis">我的优惠券</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <el-table-column prop="id" header-align="center" align="center" label="序号">
      </el-table-column>
      <el-table-column prop="pname" header-align="center" align="center" label="产品名称">
      </el-table-column>
      <el-table-column prop="type" header-align="center" align="center" label="产品分类">
      </el-table-column>
      <el-table-column prop="total" header-align="center" align="center" label="库存">
      </el-table-column>
      <el-table-column prop="price" header-align="center" align="center" label="价格">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="goshop(scope.row)">购买</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[10, 3, 50, 100]" :page-size="pageSize" :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      {{discount}}<br>
      名称<el-input v-model="product.pname" disabled placeholder="请输入内容"></el-input><br>
      品牌<el-input v-model="product.type" disabled placeholder="请输入内容"></el-input><br>
      价格<el-input v-model="product.price" disabled placeholder="请输入内容"></el-input><br>
      数量：<el-input v-model="log.num" placeholder="请输入内容"></el-input><br>
      优惠券<el-select v-model="log.disindex" placeholder="请选择">
        <el-option v-for="(item,index) in mydis" :key="item.id" :label="item.name" :value="index">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addlog">确 定</el-button>
      </span><br>
      总价<el-input v-model="log.sum" placeholder="请输入内容"></el-input><br>
      优惠：<el-input v-model="log.price" placeholder="请输入内容"></el-input><br>
    </el-dialog>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          discount: {},
          log: {
            disindex: '',
            pid: '',
            did: 0,
            tel: '',
            num: '',
            sum: '',
            price: ''
          },
          mydis: [],
          product: {
            pname: '',
            type: '',
            price: ''
          },
          dialogVisible: false,
          baseUrl: 'http://localhost:8888/api',
          token: null,
          name: localStorage.getItem("name"),
          dataForm: {
            key: ''
          },
          dataList: [],
          pageIndex: 1,
          pageSize: 3,
          totalPage: 0,
          dataListLoading: false,
          dataListSelections: [],
          addOrUpdateVisible: false
        }
      },
      watch: {
        'log.num'(val) {
          this.log.price = 0
          var data = this.mydis[this.log.disindex]
          this.log.sum = this.product.price * val
          if (this.log.did != 0) {
            if (this.log.sum > this.discount.man && data.state == '未使用' && this.discount.disType == '满减卷') {
              this.log.price = this.log.sum - this.discount.zhe
            } else if (this.log.sum > this.discount.man && data.state == '未使用' && this.discount.disType == '折扣卷') {
              this.log.price = this.log.sum * (this.discount.bi / 100)
            } else {
              this.$message('优惠券不可用');
            }
          }
        },
        'log.disindex'(val) {
          this.log.price = 0
          var data = this.mydis[val]
          this.log.did = data.id
          console.log(data.id);
          axios.get(`${this.baseUrl}/product/discount/info/${this.mydis[val].disId}`, { headers: { token: this.token } }).then(({ data }) => {
            this.discount = data.discount
            console.log(this.discount);
            if (this.log.sum != 0) {
              console.log(this.log.sum, this.discount.man, this.mydis[val].state, this.discount.disType);
              if (this.log.sum > this.discount.man && this.mydis[val].state == '未使用' && this.discount.disType == '满减卷') {
                this.log.price = this.log.sum - this.discount.zhe
              } else if (this.log.sum > this.discount.man && this.mydis[val].state == '未使用' && this.discount.disType == '折扣卷') {
                this.log.price = this.log.sum * (this.discount.bi / 100)
              } else {
                this.$message('优惠券不可用');
              }
            }
          })


        }
      },
      created() {
        this.token = localStorage.getItem("token")
        if (this.token == null) {
          alert("无权访问")
          location = './login.html'
        }
        this.getDataList();
        this.getMyDis();
      },
      //方法集合
      methods: {
        gomydis() {
          location = "./mydis.html"
        },
        addlog() {
          axios.post(`${this.baseUrl}/product/product/addlog`, this.log, { headers: { token: this.token } }).then(({ data }) => {
            if (data.code == '0') {
              this.$message('购买成功');
              this.dialogVisible = false
            }
          })
        },
        getMyDis() {
          axios.get(`${this.baseUrl}/product/mydis/list`, { headers: { token: this.token } }).then(({ data }) => {
            this.mydis = data.page.list
            console.log(this.mydis);
          })
        },
        goshop(data) {
          this.log = {
            disindex: '',
            pid: '',
            did: 0,
            tel: '',
            num: '',
            sum: '',
            price: ''
          }
          this.dialogVisible = true
          this.product.pname = data.pname
          this.product.type = data.type
          this.product.price = data.price
          this.log.pid = data.id

        },
        // 获取数据列表
        getDataList() {
          this.dataListLoading = true
          axios({
            url: `${this.baseUrl}/product/product/list`,
            method: 'get',
            params: {
              'page': this.pageIndex,
              'limit': this.pageSize,
              'key': this.dataForm.key
            },
            headers: {
              token: this.token
            }
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataList = data.page.list
              this.totalPage = data.page.totalCount
            } else {
              this.dataList = []
              this.totalPage = 0
            }
            this.dataListLoading = false
          })
        },
        // 每页数
        sizeChangeHandle(val) {
          this.pageSize = val
          this.pageIndex = 1
          this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
          this.pageIndex = val
          this.getDataList()
        },
        // 多选
        selectionChangeHandle(val) {
          this.dataListSelections = val
        },
      },
    })
  </script>
</body>

</html>